﻿@{
    Layout = null;
}
@model WebApp.Models.UserInfo
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Content/jquery-1.7.1.min.js"></script>
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Content/validBox/validBox.js"></script>

    <script type="text/javascript">
        function saveForm() {
            // 前台验证 通过后再提交表单
            $('form').validBox(function (r) {
                if (r == false) return;
                $.post("/home/save", $('form').serialize(), function (data) {
                    alert(data);
                });
            });
        }
    </script>

    <style type="text/css">
        div.block {
            margin: 5px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <form>
        @if (Request["type"] != "2")
        {
            <div class="block">
                <h5>方式一</h5>
                <p>直接为Html标签编写验证规则</p>

                @Html.HiddenFor(item => item.Id)
                <div>
                    <label>名称</label>
                    @Html.TextBoxFor(item => item.Name, Html.Valid().Required("名称为必填项").Length(2, 4, "名称为2到4个字").Remote("/home/CheckName", "Id", "Name").AsHtmlAttribute())
                </div>
                <div>
                    <label>邮箱</label>
                    @Html.TextBoxFor(item => item.Email, Html.Valid().Required("邮箱为必填项").Email().MaxLength(15, "邮箱为15个字以内").AsHtmlAttribute(new { style = "color:#005580" }))
                </div>

                <div>
                    <button class="btn" onclick="saveForm();return false">提交</button>
                    <a href="/home/index?type=2">查看方式二</a>
                </div>
            </div>
        }
        else
        {
            <div class="block">
                <h5>方式二</h5>
                <p>将验证规则在Model里用特性来描述，使用ValidFor方法获取规则</p>

                @Html.HiddenFor(item => item.Id)
                <div>
                    <label>名称</label>
                    @Html.TextBoxFor(item => item.Name, Html.ValidFor(item => item.Name))
                </div>
                <div>
                    <label>邮箱</label>
                    @Html.TextBoxFor(item => item.Email, Html.ValidFor(item => item.Email, new { style = "color:#005580" }))
                </div>              
                <div>
                    <button class="btn" onclick="saveForm();return false">提交</button>
                    <a href="/home/index">查看方式一</a>
                </div>
            </div>
        }
    </form>
</body>
</html>
